Hệ thống quản lý phương tiện trong PHP
1 @charset "UTF-8";
2
3 // Default Variables
4
5 @slick-font-path: "./fonts/";
6 @slick-font-family: "slick";
7 @slick-loader-path: "./";
8 @slick-arrow-color: white;
9 @slick-dot-color: black;
10 @slick-dot-color-active: @slick-dot-color;
11 @slick-prev-character: "←";
12 @slick-next-character: "→";
13 @slick-dot-character: "•";
14 @slick-dot-size: 6px;
15 @slick-opacity-default: 0.75;
16 @slick-opacity-on-hover: 1;
17 @slick-opacity-not-active: 0.25;
18
19 /* Slider */
20 .slick-loading .slick-list{
21 background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
22 }
23
24 /* Arrows */
25 .slick-prev,
26 .slick-next {
27 position: absolute;
28 display: block;
29 height: 20px;
30 width: 20px;
31 line-height: 0px;
32 font-size: 0px;
33 cursor: pointer;
34 background: transparent;
35 color: transparent;
36 top: 50%;
37 -webkit-transform: translate(0, -50%);
38 -ms-transform: translate(0, -50%);
39 transform: translate(0, -50%);
40 padding: 0;
41 border: none;
42 outline: none;
43 &:hover, &:focus {
44 outline: none;
45 background: transparent;
46 color: transparent;
47 &:before {
48 opacity: @slick-opacity-on-hover;
49 }
50 }
51 &.slick-disabled:before {
52 opacity: @slick-opacity-not-active;
53 }
54 }
55
56 .slick-prev:before, .slick-next:before {
57 font-family: @slick-font-family;
58 font-size: 20px;
59 line-height: 1;
60 color: @slick-arrow-color;
61 opacity: @slick-opacity-default;
62 -webkit-font-smoothing: antialiased;
63 -moz-osx-font-smoothing: grayscale;
64
65 & when ( @slick-font-family = 'slick' ) {
66 /* Icons */
67 @font-face {
68 font-family: 'slick';
69 font-weight: normal;
70 font-style: normal;
71 src: url('@{slick-font-path}slick.eot');
72 src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
73 }
74 }
75 }
76
77 .slick-prev {
78 left: -25px;
79 [dir="rtl"] & {
80 left: auto;
81 right: -25px;
82 }
83 &:before {
84 content: @slick-prev-character;
85 [dir="rtl"] & {
86 content: @slick-next-character;
87 }
88 }
89 }
90
91 .slick-next {
92 right: -25px;
93 [dir="rtl"] & {
94 left: -25px;
95 right: auto;
96 }
97 &:before {
98 content: @slick-next-character;
99 [dir="rtl"] & {
100 content: @slick-prev-character;
101 }
102 }
103 }
104
105 /* Dots */
106
107 .slick-dotted .slick-slider {
108 margin-bottom: 30px;
109 }
110
111 .slick-dots {
112 position: absolute;
113 bottom: -25px;
114 list-style: none;
115 display: block;
116 text-align: center;
117 padding: 0;
118 margin: 0;
119 width: 100%;
120 li {
121 position: relative;
122 display: inline-block;
123 height: 20px;
124 width: 20px;
125 margin: 0 5px;
126 padding: 0;
127 cursor: pointer;
128 button {
129 border: 0;
130 background: transparent;
131 display: block;
132 height: 20px;
133 width: 20px;
134 outline: none;
135 line-height: 0px;
136 font-size: 0px;
137 color: transparent;
138 padding: 5px;
139 cursor: pointer;
140 &:hover, &:focus {
141 outline: none;
142 &:before {
143 opacity: @slick-opacity-on-hover;
144 }
145 }
146 &:before {
147 position: absolute;
148 top: 0;
149 left: 0;
150 content: @slick-dot-character;
151 width: 20px;
152 height: 20px;
153 font-family: @slick-font-family;
154 font-size: @slick-dot-size;
155 line-height: 20px;
156 text-align: center;
157 color: @slick-dot-color;
158 opacity: @slick-opacity-not-active;
159 -webkit-font-smoothing: antialiased;
160 -moz-osx-font-smoothing: grayscale;
161 }
162 }
163 &.slick-active button:before {
164 color: @slick-dot-color-active;
165 opacity: @slick-opacity-default;
166 }
167 }
168 }
